@charset "utf-8";
@import "reset";

@mixin paddinglrzero{
    padding-left: 0;
    padding-right: 0;
}
@mixin flexcenter{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
@mixin flexbetween{  
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}
@mixin rowwidth{
    width: 85%;
}
@function v($p){
    @return $p/1440*100vw;
}

@media only screen and (min-width: 768px) {
    html,body {min-width: 1100px;}
}
html,body{
    font-size: 14px;
}

/*-------------------------------------------------------*/
//中部
section{
    //banner轮播图
    .carousel{
        //图片
        .item>img{width: 100%;}
    }
    //LayaFlash 引擎
    .LayaFlash{
        width: 100%;
        background: #fbfaf7;
        padding: v(104) 0 v(40);
        >.row{
            display: flex;
            justify-content: center;
            width: 100%;
            //LayaFlash_left 引擎左字
            .LayaFlash_left{
                position: relative;
                z-index: 2;
                .LayaFlash_titleword{width: 337px;}
                .LayaFlash_phonepic{width: v(365);}
                .LayaFlash_p{
                    font-size: 14px;
                    color: #666666;
                    margin: v(33) 0 v(77);
                }
                .LayaFlash_ul{
                    .LayaFlash_li{
                        display: flex;
                        margin-bottom: v(48);
                        img{width: 64px;
                            height: 64px;
                            background-color: #0078d7;
                            border-radius: 5px;}
                            div{margin-left: v(14);}
                        h4{ font-size: 14px;
                            color: #333333;
                            margin-bottom: v(10);}
                        p{font-size: 14px;
                            color: #666666;}       
                    }
                }
            }
            //LayaFlash_right 引擎右图
            .LayaFlash_right{
                position: relative;
                z-index: 1;
            }
        }
             
    }
//  @media (max-width:768px){
//      .LayaFlash_left{
//              padding-left: 45px;
//              box-sizing: border-box;}
//  }
    //Layabox 优势
    .Layabox{
        padding-top: v(114);
        padding-bottom:v(105) ;
        background: white;
        >.row{
            @include rowwidth;
            margin: 0 auto;
            display: flex;
            align-items: flex-end;
            justify-content: space-between; 
            //Layabox-left 优势左边
            .Layabox_left{
                img{width: 303px;}
            }
            //Layabox-right 优势右边
            .Layabox_right{
                >img{width: 308px;
                    margin-bottom: v(44);}
                >ul{
                    width: 100%;
                    li{
                        display: flex;
                        align-items: center;
                        margin-top: v(30);
                        img{width: 54px;
                            border-radius: 50%;
                            background:#8fc31f ;}
                        p{font-size: 14px;
                            color: #666666;
                            margin-left: v(10);}
                    }
                }
            }
        }   
    }
//  @media (max-width:768px){
//      .Layabox>.row{
//          @include rowwidth;
//          display: block;
//          text-align: center;
//          .Layabox_left>img{
//              margin: 0 auto;
//              padding-bottom: v(100);
//          }
//          .Layabox_right{
//              padding-left: 0;
//              padding-right: 0;
//              >ul>li{
//                  width: 100%;
//                  padding-left: 0;
//                  padding-right: 0;
//                  >p{text-align: left;}
//              }
//          }
//      }
//  }
    //Layabox产品家族
    .LayaFmiPrd{
        width: 100%;
        background: #0079D7;
        padding-top: v(111);
        padding-bottom: v(140);
        text-align: center;
        color: white;
        h4{font-size: 41px;}
        >.row{
            >ul{
                .LayaFmiPrd_li{
                    display: flex;
                    justify-content: flex-start;
                    margin-top: v(70);
                    >img{width: 66px;
                        height: 66px;}
                    >div{text-align: left;
                        margin-left: v(60);
                        >p:nth-child(2){height: 66px;}
                    }
                }
            }
        }
    }
    //Wonderful game 精彩游戏
    .WonderGame{
        background:white;
        width: 100%;
        padding-top: v(86);
        padding-bottom: v(20);
        //标题 title
        .WonderGame_title{
            @include rowwidth;
            margin: 0 auto;
            margin-bottom: v(45);
            a{color: black;
                text-align: right;}
        }
        // 视频和小游戏
        .WonderGame_contect{
            @include rowwidth;
            margin: 0 auto;
            //video 视频
            .smallvideo{
                height: 200px;
                video{width: 100%;
                    height: 100%;
                    cursor: pointer;}
            }
            //small game 小游戏
            .smallgame{
                li{margin-bottom: v(30);}
                li{
                    >img{width: 67px;}
                    p{text-align: center;
                       width: 67px;
//                      overflow: hidden;
                        height: 16px;}
                }
            }
        }

    }
//  @media (max-width:768px){
//      .smallgame{padding-left: 30px;
//          width: 345px;
//          display: flex;
//          justify-content: space-between;
//          flex-wrap: wrap;}
//  }
    //cooperative partner 合作伙伴
    .coo-partner{
        width: 100%;
        padding-top: v(40);
        padding-bottom: v(64);
        background: #f4f4f4;
        .row{@include rowwidth;
            margin: 0 auto;}
        h4{
            margin-bottom: v(32);
            span{color: #777777;
                font-size: 14px;}
        }
        ul{
            li{
                margin-top: v(20);
                img{width: 150px;}
            }
        }
    }
}
/*-------------------------------------------------------*/

//-----------------动画
.LayaFlash_right>img.on{animation: flipInY 1s backwards;}
.LayaFlash_ul{
    li.on{animation: fadeInUp 1s backwards;}
}

.Layabox_left>img.on{animation: rotateIn 1s forwards;}
.Layabox_right li.on{animation: fadeInRight 1s forwards;}

.LayaFmiPrd_li:nth-child(odd).on{animation: fadeInLeft 1s forwards;}
.LayaFmiPrd_li:nth-child(even).on{animation: fadeInRight 1s forwards;}

.smallgame>li:nth-child(-n+12).on{animation: flipInY 1s forwards;}
.smallgame>li:nth-child(-n+9).on{animation: flipInX 1s forwards;}
.smallgame>li:nth-child(-n+6).on{animation: flipInY 1s forwards;}
.smallgame>li:nth-child(-n+3).on{animation: flipInX 1s forwards;}

.coo-partner ul li:nth-child(odd).on{animation: rollIn 1s forwards;}
.coo-partner ul li:nth-child(even).on{animation: rollOut 1s forwards;}

@keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
        -ms-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg)
    }
    99% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        -ms-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
    100%{opacity: 1;}
}
